<template>
  <view class="t-login">
    <view class="t-b">欢迎登录账号</view>
    <form class="cl">
      <view class="t-a">
        <image src="@/static/login/总公司.png"></image>
        <input
          v-model="dataObj.companyName"
          name="phone"
          placeholder="请输入公司名称"
        />
      </view>
      <view class="t-a">
        <image src="@/static/login/sj.png"></image>
        <input
          v-model="dataObj.username"
          name="phone"
          placeholder="请输入用户名"
        />
      </view>
      <view class="t-a">
        <image src="@/static/login/yz.png"></image>
        <input
          v-model="dataObj.password"
          type="password"
          :passwordIcon="true"
          name="code"
          placeholder="请输入密码"
        />
      </view>
      <u-button
        text="立即登录"
        type="primary"
        class="save-btn"
        shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
        @click="btnSubmit"
      ></u-button>
    </form>
    <view class="t-e cl">
      <view class="t-g">
        <image src="@/static/login/wx2.png"></image>
      </view>
    </view>
    <view class="fixed-btn">
      <view class="t-f">登录即同意<text>用户协议</text></view>
      <div class="flex flex-sa c-99">
        <div>立即注册</div>
        <div>忘记密码</div>
        <div>遇到问题</div>
      </div>
    </view>
  </view>
</template>
<script>
import { login } from "@/apis/sys/users.js";

import { setToken, getToken } from "@/common/auth.js";

const localStoreKey = "username";

const localCompanyKey = "companyName";
export default {
  data() {
    return {
      loading: false,
      dataObj: {
        // 韶光科技
        companyName: "",
        username: "",
        password: "",
      },
    };
  },
  computed: {
    title: function () {
      const copyRight = this.$store.getters.copyRight || {};
      const phoneCR = copyRight.phone || {};
      return phoneCR.loginTitle;
    },
  },
  created() {
    const username = this.$ls.get(localStoreKey);
    if (username) this.$set(this.dataObj, "username", username);
    const companyName = this.$ls.get(localCompanyKey);
    if (username) this.$set(this.dataObj, "companyName", companyName);
  },
  onShareAppMessage(res) {
    const title = "";
    const path = `/pages/login/index`;
    return {
      title,
      path,
    };
  },
  methods: {
    btnRegister() {
      this.$Router.replace({
        name: "Register",
      });
    },
    btnForgotPassword() {
      this.$Router.replace({
        name: "ForgotPassword",
      });
    },
    btnSubmit() {
      const params = this.dataObj;
      const username = this.dataObj.username;
      const companyName = this.dataObj.companyName;
      this.$ls.set(localStoreKey, username);
      this.$ls.set(localCompanyKey, companyName);

      this.validate(params)
        .then((_) => {
          this.loading = true;
          this.$store
            .dispatch("user/login", params)
            .then((res) => {
              console.log('[ res ] >', res)
              this.loading = false;
              uni.hideLoading();
              this.handleLoginSuccess(res);
            })
            .catch((err) => {
              this.loading = false;
              uni.hideLoading();
              uni.showToast({
                title: err.data.title,
                icon: "none",
              });
            });
        })
        .catch((err) => {
          uni.showToast({
            title: err.message,
            icon: "none",
          });
        });
    },
    handleLoginSuccess(res) {
      const token = res.data.data;
      const stoken = getToken();
      uni.switchTab({
        url: "pages/bar/sn/index",
      });
    },
    handleJSON(obj) {
      console.log(JSON.stringify(obj));
      return JSON.stringify(obj);
    },
    validate(data = {}) {
      const { username, password,companyName } = data;
      return new Promise((resovel, reject) => {
        if (!username || username === "") {
          return reject(new Error("用户名不能为空."));
        }
        if (!password || password === "") {
          return reject(new Error("密码不能为空."));
        }
        if (!companyName || companyName === "") {
          return reject(new Error("公司名称不能为空."));
        }
        return resovel();
      });
    },
    handlePrintLabel() {
      // 文字
      window.NativeApp.initCanvas(384, 220);
      let formatText = JSON.stringify({
        textSize: 24,
        align: 0,
        enUnderline: true,
        enBold: true,
        rotate: 0,
        xOffset: 2,
        yOffset: 2,
      });
      window.NativeApp.renderText("测试下", formatText);

      // 条码
      const formatBarcode = JSON.stringify({
        dotWidth: 1, //必要
        barHeight: 80, //必要
        readable: 0,
        align: 0,
        rotate: 0,
        width: 180,
        xOffset: 200,
        yOffset: 2,
      });
      window.NativeApp.renderBarCode("1234567", formatBarcode);

      // 二维码
      let formatQrCode = JSON.stringify({
        dotSize: 4,
        rotate: 0,
        width: 100,
        height: 100,
        xOffset: 10,
        yOffset: 35,
      });
      window.NativeApp.renderQrCode("今天吃饭了吗", formatQrCode);

      // 线条
      const formatArea = JSON.stringify({
        style: 1,
        width: 50,
        height: 1,
        thickness: 1,
        xOffset: 300,
        yOffset: 200,
      });
      window.NativeApp.renderArea(formatArea);

      const formatArea2 = JSON.stringify({
        style: 4,
        width: 50,
        height: 1,
        thickness: 1,
        xOffset: 100,
        yOffset: 100,
      });
      window.NativeApp.renderArea(formatArea2);

      // 打印
      window.NativeApp.printCanvas(1);
    },
  },
};
</script>
<style>
.t-login {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
  background: #fafafa;
}

.t-login button {
  font-size: 28rpx;
  background: #000;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
}

.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #f4f4f4;
  font-size: 28rpx;
  border-radius: 50rpx;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 60rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  border-right: 2rpx solid #dedede;
  padding-right: 20rpx;
}

.t-login .t-b {
  text-align: center;
  font-size: 46rpx;
  color: #000;
  padding: 100rpx 0;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #000;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 100%;
}

.t-login .t-e image {
  width: 100rpx;
  height: 100rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 50rpx 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 8rpx;
  color: #999;
}

.t-login .uni-input-placeholder {
  color: #000;
}

.cl {
  width: 80%;
  display: block;
  margin: auto;
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: "\20";
}
</style>
